<template>
	<view class="my-modal-verifysubmit">
		<my-modal title="上传身份" :value="showPopup" @input="onInput" @confirm="onConfirm">
			<view class="form-box">
				<uni-forms ref="form" :modelValue="form" :rules="rules" labelWidth="200" label-position="top">
					<uni-forms-item required label="姓名" name="name">
						<uni-easyinput type="text" v-model="form.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item required label="身份证号" name="idCard">
						<uni-easyinput type="idcard" v-model="form.idCard" placeholder="请输入身份证号" />
					</uni-forms-item>
					<uni-forms-item required label="联系电话" name="mobile">
						<uni-easyinput type="number" maxlength="11" v-model="form.mobile" placeholder="请输入联系电话" />
					</uni-forms-item>
					<uni-forms-item required label="身份证照片" name="shenfenzheng">
						<u-upload :action="action" name="file" max-count="1" :header="header"
							@on-choose-complete="uploading = true"
							@on-uploaded="e => onUploaded(e, 'nucleicAcidReportImage')"></u-upload>
					</uni-forms-item>
				</uni-forms>
			</view>
		</my-modal>
	</view>
</template>

<script>
	export default {
		name: "my-modal-verifysubmit",
		props: {
			value: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			value: {
				handler(nVal) {
					this.showPopup = nVal
				},
				immediate: true
			}
		},
		data() {
			return {
				showPopup: false,
				customStyle: {
					padding: '0 40rpx'
				},
				form: {
					name: "",
					idCard: "",
					mobile: "",
					shenfenzheng: ""
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					idCard: {
						rules: [{
								required: true,
								errorMessage: '请输入身份证号',
							},
							{
								pattern: "/(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)/",
								errorMessage: "请输入正确身份证"
							},
						]
					},
					mobile: {
						rules: [{
								required: true,
								errorMessage: '请输入联系电话',
							},
							{
								pattern: "^1[23456789]\\d{9}$",
								errorMessage: "请输入正确联系电话"
							},
						]
					}
				},
				action: "",
				uploading: false
			};
		},
		computed: {
			header() {
				return {
					// Authorization: this.$store.state.accessToken
				};
			}
		},
		mounted() {
			// this.$refs.form.setRules(this.rules);
		},
		methods: {
			onInput(val) {
				this.showPopup = val
				this.$emit('input', val)
				if (!val) {
					this.$refs.form.resetFields()
				} else {
					this.$nextTick(() => {
						this.$refs.form.setRules(this.rules)
					})
				}
			},
			onConfirm() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					this.$emit('confirm', this.form)
				}).catch(err => {
					uni.hideLoading()
					console.log('表单错误信息：', err);
				})
			},
			onUploaded() {}
		}
	}
</script>

<style lang="scss" scoped>
	.form-box {
		padding: 0 $uni-spacing-row-lg;
	}
</style>
